{#    判断有无post#}
{% if posts %}
    {# 遍历所有posts #}
    {% for post in posts %}
        <div class="card mb-3 w-100 bg-light">
            <div class="card-header">
                {#  头像的用户信息悬浮窗  #}
                <a class="dead-link" href="{{ url_for('user.index', username=post.author.username) }}">
                    <img class="rounded img-fluid avatar-s profile-popover"
                         data-href="{{ url_for('ajax.get_profile', user_id=post.author.id) }}"
                         src="{{ url_for('main.get_avatar', filename=post.author.avatar_m) }}">
                </a>
                {#  用户名的用户信息悬浮窗  #}
                <a class="profile-popover trend-card-avatar"
                   data-href="{{ url_for('ajax.get_profile', user_id=post.author.id) }}"
                   href="{{ url_for('user.index', username=post.author.username) }}">{{ post.author.name }}</a>
                {# 文章发表时间 #}
                <span class="float-right">
                <small data-toggle="tooltip" data-placement="top" data-timestamp="{{ post.timestamp }}"
                       data-delay="500">
                    {{ moment(post.timestamp).fromNow(refresh=True) }}</small></span>
            </div>
            {#  显示文章 #}
            <div class="card-body">
                <h3 class="text-primary">
                    <a href="{{ url_for('main.show_post',post_id=post.id) }}">{{ post.title }}</a></h3>
                <p>
                    {{ post.body | striptags | truncate }}
                    <small><a href="{{ url_for('main.show_post',post_id=post.id) }}">加载更多...</a></small>
                </p>
                <small>
                    分类: <a
                        href="{{ url_for('main.show_category',category_id=post.category.id) }}">{{ post.category.name }}</a>
                </small>
                {% if not loop.last %}
                    <hr>
                {% endif %}
            </div>
            {#  文章列表的左下角 #}
            <div class="card-footer">
                <span class="oi oi-star"></span>
                <span id="collectors-count-{{ post.id }}"
                      data-href="{{ url_for('ajax.collectors_count', post_id=post.id) }}">
                                {{ post.collectors|length }}
                            </span>
                <span class="oi oi-comment-square"></span> {{ post.comments|length }}
                <div class="float-right">
                    {% if current_user.is_authenticated %}
                        {#  用户(任意)登录之后展示文章收藏功能  #}
                        <button class="{% if not current_user.is_collecting(post) %}hide{% endif %}
                                                             btn btn-outline-secondary btn-sm uncollect-btn"
                                data-href="{{ url_for('ajax.uncollect', post_id=post.id) }}"
                                data-id="{{ post.id }}">
                            <span class="oi oi-x"></span> 取消收藏
                        </button>
                        <button class="{% if current_user.is_collecting(post) %}hide{% endif %}
                                                             btn btn-outline-primary btn-sm collect-btn"
                                data-href="{{ url_for('ajax.collect', post_id=post.id) }}"
                                data-id="{{ post.id }}">
                            <span class="oi oi-star"></span> 收藏
                        </button>
                    {% else %}
                        {#  匿名用户的收藏 #}
                        <form class="inline" method="post"
                              action="{{ url_for('main.collect', post_id=post.id) }}">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-outline-primary btn-sm">
                                <span class="oi oi-star"></span> 收藏
                            </button>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endfor %}
{% else %}
    <div class="tip">
        <h5>现在没有文章哦!</h5>
        {% if current_user.isauthenticated %}
            <a href="{{ url_for('user.new_post') }}">写文章</a>
        {% endif %}
    </div>
{% endif %}
